<template>
	<view class="video-list">
		<view class="video">
			<block v-for='(item,index) in video_list' :key='index'>
				<view class="huodong-info">
					<view class="huodong-video">
						<yy-video-player class="myVideo" style="width: 100%;" :id="'video'+ index" :auto-play="item.isPlay" :url="item.source"
						 :poster="item.listImage" :danmuList="danmu" :show-back-btn="false" :show-download-btn="false" v-show="item.isPlay"
						 @ended="endPlayVideo(videoInfo)"></yy-video-player>

						<view class='myCover' v-if="!item.isPlay">
							<view class='myCoverCon'>
								<image class='myCoverImg' :src="item.listImage"></image>
								<view class="myPalyButton">
									<image @click="playTheVideo(item)" src="../../static/img/play.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="huodong-title">
						<text>{{item.title}}</text>
					</view>
				</view>
			</block>
		</view>
		<footLogo></footLogo>
	</view>
</template>

<script>
	import footLogo from "@/components/foot-logo/footLogo.vue"
	import yyVideoPlayer from '@/components/yy-video-player/yy-video-player.nvue';

	export default {
		components: {
			footLogo,
			yyVideoPlayer
		},
		data() {
			return {
				video_list: [],
				index: 0,
				danmu: []
			};
		},
		onLoad: function(option) {
			this.getVedioList()
		},
		methods: {
			getVedioList: function() {
				let params = {
					channelType: this.pub.channelType,
					typeCode: '130003605' //魅力非遗后端code
				}
				this.$postApi(this.$path.NEWS_LIST, params).then(res => {
					console.log("视频资讯返回数据---------------->", res.data)
					if (res.data.success) {
						res.data.data.list.forEach((item, index) => {
							item.isPlay = false
							item.index = index
						})
						this.video_list = res.data.data.list


					} else {
						this.pub.showError(res.data.error)
					}
				})
			},

			playTheVideo: function(e) {
				console.log("------------------------", e)
				let temp = this.video_list;
				temp.forEach(item => {
					item.isPlay = false;
				});
				temp[e.index].isPlay = true;

				var videoContextPrev = uni.createVideoContext("video" + this.index, this)

				videoContextPrev.seek(0)
				videoContextPrev.pause()

				let videoContext = uni.createVideoContext('video' + e.index, this);
				videoContext.play();
				this.index = e.index
				this.video_list = temp

				console.log("this.videoInfo>", this.video_list);

			},

			endPlayVideo: function(e) {
				let item = e;
				item.isPlay = false;
				this.videoInfo = item;
				let videoContext = uni.createVideoContext('myVideo')
				videoContext.exitFullScreen();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.video-list {
		padding: 0;
		margin: 0;
		font-size: 34upx;
		background: #f2f2f2;
	
		image {
			width: 100%;
			height: 100%;
		}
	
		min-height: 100%;
	
	}
	
	
	.video {
		padding: 20upx;
	
	}
	
	.huodong-info {
		margin-top: 20upx;
		// padding: 20upx;
		position: relative;
		display: inline-block;
		/*position: relative;*/
		width: 100%;
		/*height: 400rpx;*/
		// margin-left: 23rpx;
		flex-direction: column;
		background: rgba(255, 255, 255, 1);
		box-shadow: #f2f2f2 0px 0px 20px;
		/* box-shadow:black 0px 0px 10px; */
		border-radius: 20upx;
		/* border: red 1px solid; */
	}
	
	.huodong-img,
	.huodong-video {
	
		width: 100%;
		height: 396upx;
		/*position: relative;*/
		/* border: orange 2px solid; */
	}
	
	.myVideoCon {
		margin-top: 15upx;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 396upx;
		padding-top: 40upx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.myVideo {
		width: 100%;
		height: 396upx;
	
	}
	
	.myCover {
		width: 100%;
		height: 396upx;
		background-color: #fff;
		border-radius: 20upx 20upx 0 0;
	}
	
	.myCoverCon {
		width: 100%;
		height: 396upx;
		position: relative;
	
	}
	
	.myCoverImg {
		width: 100%;
		height: 396upx;
		border-radius: 20upx 20upx 0 0;
	
	}
	
	.myPalyButton {
		width: 130upx;
		height: 130upx;
		position: absolute;
		/* top: 105rpx; */
		bottom: 40%;
		left: 43%;
		z-index: 200;
	}
	
	.myPlaytitle {
		position: absolute;
		z-index: 200;
		bottom: 10%;
		left: 10%;
		width: 80%;
		// width:632px;
		height: 89upx;
		background: rgba(255, 255, 255, 1);
		opacity: 0.76;
		border-radius: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(26, 26, 26, 1);
		line-height: 51upx;
	}
	
	.huodong-title {
		padding: 38upx 0upx 44upx 32upx;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

</style>
